<template>
  <div>
    <h1>模拟登录</h1>
    <div>
      <label for="login">账号: </label>
      <el-input
        id="login"
        v-model="log_val"
        style="width: 240px"
        placeholder="请输入账号"
        clearable
      />
    </div>
    <div style="margin-top: 20px">
      <label for="password">密码: </label>
      <el-input
        id="password"
        v-model="pass_val"
        style="width: 240px"
        placeholder="请输入密码"
        type="password"
        show-password
        clearable
      />
    </div>

    <div style="margin-top: 20px">
      <el-button type="success" round @click="cancel()">取消</el-button>
      <el-button type="success" round @click="login(log_val, pass_val)">登录</el-button>
    </div>

    <div style="margin-top: 20px; border: 1px solid rebeccapurple">
      <h1>用户信息存储在状态管理里</h1>
      <div>
        <label for="login2">账号: </label>
        <el-input
          id="login2"
          v-model="log_to_store"
          style="width: 240px"
          placeholder="请输入账号"
          clearable
        />
      </div>
      <div style="margin-top: 20px">
        <label for="password2">密码: </label>
        <el-input
          id="password2"
          v-model="pass_to_store"
          style="width: 240px"
          placeholder="请输入密码"
          type="password"
          show-password
          clearable
        />
      </div>

      <div style="margin-top: 20px">
        <el-button type="success" round @click="cancel_store()">取消</el-button>
        <el-button type="success" round @click="login_store(log_to_store, pass_to_store)"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/counter' // 路径根据你的项目结构进行调整
const log_val = ref('')
const pass_val = ref('')

const log_to_store = ref('')
const pass_to_store = ref('')

async function login_store(login, password) {
  console.log(login, password)
  const userInfo = await performLogin(login, password)
  console.log('userInfo', userInfo)

  if (userInfo) {
    const userStore = useUserStore()
    userStore.setUserInfo(userInfo)
    // 可以根据需要将用户重定向到其他页面
    this.$router.push('/')
  }
}

function performLogin(log_to_store, pass_to_store) {
  // 这里应该是实际的登录逻辑，比如发送请求到服务器
  // 假设登录成功，这里返回一个模拟的用户信息对象
  return {
    name: 'John Doe',
    email: 'john.doe@example.com',
    authToken: log_to_store + pass_to_store,
  }
}

// 登录
function login(logval, passval) {
  console.log(logval, passval)
  localStorage.setItem('authToken', log_val.value + pass_val.value)
}
// 取消登录
function cancel() {
  log_val.value = ''
  pass_val.value = ''
  localStorage.removeItem('authToken')
}
</script>
<style scoped></style>
